<template>
  <!--<el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">-->
    <!--<el-radio-button label="top">top</el-radio-button>-->
    <!--<el-radio-button label="right">right</el-radio-button>-->
    <!--<el-radio-button label="bottom">bottom</el-radio-button>-->
    <!--<el-radio-button label="left">left</el-radio-button>-->
  <!--</el-radio-group>-->

  <el-container>
    <el-container>
      <el-tabs :tab-position="tabPosition" style="height: 200px;">
        <el-tab-pane label="用户管理">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
      </el-tabs>
     <el-container class="thirdSelect">
       <el-select v-model="value" placeholder="请选择" @change="outputChangeValue">
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value">
         </el-option>
       </el-select>
     </el-container>
    </el-container>
    <el-container>
      <el-button-group>
        <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
        <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
      <el-button-group>
        <el-button type="primary" icon="el-icon-edit"></el-button>
        <el-button type="primary" icon="el-icon-share"></el-button>
        <el-button type="primary" icon="el-icon-delete"></el-button>
      </el-button-group>
    </el-container>
  </el-container>

  <!--<el-button>sss</el-button>-->

</template>
<script>
  export default {
    data() {
      return {
        tabPosition: 'top',
        //下拉框初始化
        options: [{
          value: '1',
          label: 'top'
        }, {
          value: '2',
          label: 'left'
        }, {
          value: '3',
          label: 'right'
        }, {
          value: '4',
          label: 'bottom'
        }, {
          value: '5',
          label: '默认'
        }],
        value: ''
      };
    },
    methods:{
      outputChangeValue: function (value) {
        // alert(value.value)
        // alert(value.label)

        // alert(value)//弹出的是 value值 : 也就是 v-option的 value值; 如果要获得label，那么需要遍历获取对象

        //筛选出匹配的数据
        let obj = {};
        obj = this.options.find((item) => {
          return item.value === value;
        })
        alert(obj.value + "; " + obj.label)
        //修改方向
        this.tabPosition=obj.label;
      }
    }
  };
</script>

<style scoped>
  .thirdSelect{
    float: left;
    margin-left: 10%;
    margin-top:0%;
  }
</style>
